<script
        lang="ts"
        setup
>
    import {sysParamPost, sysParamGet} from '@/api'
    import type {ISysParamPost} from '@/typed/request'
    import {type FormInst, type FormRules} from 'naive-ui'

    import {ref} from 'vue'

    const formRef = ref<FormInst | null>(null)

    const initForm: ISysParamPost = {
        id: 'CUSTOMER_PHONE',
        value: '',
        remark: ''
    };

    const modalForm = ref<ISysParamPost>({...initForm})


    const rules: FormRules = {
        value: [{
            required: true,
            message: '请输入客服电话',
            trigger: ['blur', 'input']
        }],
        remark: [{
            required: true,
            message: '请输入备注信息',
            trigger: ['blur', 'input']
        }]
    }

    onMounted(async () => {
        try {
            const {code, data} = await sysParamGet({id: 'CUSTOMER_PHONE'});
            if (code === 200 && data) {
                modalForm.value = {
                    id: 'CUSTOMER_PHONE',
                    value: data.sysvalue,
                    remark: data.sysname
                }
            }
        } catch (err) {
            window.$message.error('加载客服电话失败')
        }
    })

    async function onSave(item: any) {
        formRef.value?.validate(async (errors: any) => {
            if (!errors) {
                const dialog = window.$dialog.warning({
                    title: '确认更新',
                    content: `确定要更新客服电话吗？`,
                    positiveText: '确定',
                    negativeText: '取消',
                    loading: false,
                    closeOnEsc: false,
                    maskClosable: false,
                    onPositiveClick: async () => {
                        try {
                            const {code} = await sysParamPost(modalForm.value as ISysParamPost)
                            if (code === 200) {
                                window.$message.success('更新成功')
                                return true
                            }
                            return false
                        } catch (error) {
                            window.$message.error('更新失败')
                            dialog.loading = false
                            return false
                        }
                    }
                })
            } else {
                //window.$message.error('请先填写完整信息')
            }
        })
    }

</script>

<template>


    <n-form style="margin-top: 30px"
            ref="formRef"
            :model="modalForm"
            label-placement="left"
            label-width="140"
            :rules="rules"
    >
        <n-form-item label="客服电话" path="value">
            <n-input
                    v-model:value="modalForm.value"
                    placeholder="请输入客服电话"
                    style="max-width: 50%"
            />
        </n-form-item>

        <n-form-item
                label="备注"
                path="remark"
        >
            <n-input
                    style="max-width: 50%"
                    type="textarea"
                    placeholder="请输入备注信息"
                    v-model:value="modalForm.remark"
            />
        </n-form-item>

        <!-- 按钮与输入框对齐 -->
        <n-form-item label=" ">
            <n-space>
                <n-button style="width: 100px" type="primary" @click="onSave">保存</n-button>
            </n-space>
        </n-form-item>


    </n-form>

</template>
<style
        lang="less"
        scoped
>
    .content {
        padding: 0 20px 20px 20px;

        header {
            padding: 20px 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .form-container {
            padding: 20px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        .form-actions {
            margin-top: 20px;
            padding-top: 12px;
            border-top: 1px solid #f0f0f0;
        }

    }
</style>
